<template>
  <div class="container">
    <div class="blog">
      <nav>
        <el-dropdown trigger="click" @command="handleCommand">
          <a class="item">
            {{ isAdmin ? '管理员' : '普通用户' }}
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </a>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </nav>
      <BlogPost v-for="post in posts" :key="post.id" :post="post" @click="handlePostClick(post)">
        <!-- 添加条件判断显示图片 -->
        <img v-if="post.image" :src="post.image" alt="Post Image"/>
      </BlogPost>
    </div>
  </div>
</template>

<script>
import BlogPost from '@/components/BlogPost.vue'
import router from '@/router'

// 导入图片资源
import personalImage from '@/assets/personal.png';
import wordImage from '@/assets/word_bk.png';
import myhomeImage from '@/assets/myhome.png';
import {ElMessage} from "element-plus";

export default {
  components: {
    BlogPost
  },
  data() {
    return {
      posts: [
        // 确保每篇文章有image属性，如果没有则为null或空字符串
        {
          id: 1,
          title: '大众留言板',
          content: '',
          date: '2025-03-05',
          route: '/personal-home', // 添加路由信息
          image: personalImage // 使用导入的图片变量
        },
        {
          id: 2,
          title: '我的功能站',
          content: '',
          date: '2025-03-05',
          route: '/Myhome',
          image: myhomeImage
        },
        {
          id: 3,
          title: '技术博客',
          content: '',
          date: '2025-03-05',
          route: '/technical-blog',
          image: wordImage
        },

        {
          id: 4,
          title: '我的历程',
          content: '',
          date: '2025-03-05',
          route: '/journey',
          image: null
        }
      ],
      isAdmin: false, // 新增：是否为管理员
      particles: [] // 用于管理粒子效果
    }
  },
  methods: {
    handlePostClick(post) {
      if (post.route) {
        router.push(post.route)
      }
    },
    gotoBlog() {
      router.push({name: 'Blog'});
    },
    handleCommand(command) {
      if (command === 'logout') {
        localStorage.removeItem('jwtToken');
        this.isAdmin = false;
        router.push('/');
      }
    },
    async checkAdminStatus() {
      const token = localStorage.getItem('jwtToken');
      if (!token) {
        this.isAdmin = false;
        return;
      }

      try {
        const response = await fetch('/api/user/role', {
          headers: {
            'Authorization': `Bearer ${token}`
          }
        });

        if (response.ok) {
          const data = await response.json();
          console.log('获取到的用户角色数据:', data);
          if (data.code === 200 && data.role === 'ROLE_ADMIN') {
            this.isAdmin = true;
            console.log('当前用户是管理员');
          } else {
            this.isAdmin = false;
            console.log('当前用户不是管理员');
          }
        } else if (response.status === 401) {
          ElMessage.error('登录已过期，请重新登录');
          localStorage.removeItem('jwtToken');
          router.push('/');
        } else {
          console.error('获取用户角色失败:', response.status);
          this.isAdmin = false;
        }
      } catch (error) {
        console.error('检查管理员状态时出错:', error);
        this.isAdmin = false;
      }
    },
    // 创建粒子效果
    createParticles() {
      const blogElement = document.querySelector('.blog');
      if (!blogElement) return;
      
      setInterval(() => {
        const particle = document.createElement('div');
        particle.className = 'particle';
        // 随机位置
        particle.style.left = `${Math.random() * 100}%`;
        particle.style.top = `${Math.random() * 100}%`;
        // 随机大小
        const size = Math.random() * 4 + 2;
        particle.style.width = `${size}px`;
        particle.style.height = `${size}px`;
        // 随机动画持续时间
        const duration = Math.random() * 3 + 2;
        particle.style.animation = `particle ${duration}s linear forwards`;
        
        blogElement.appendChild(particle);
        
        // 动画结束后移除粒子
        setTimeout(() => {
          if (particle.parentNode === blogElement) {
            blogElement.removeChild(particle);
          }
        }, duration * 1000);
      }, 300);
    }
  },
  mounted() {
    this.checkAdminStatus();
    this.createParticles(); // 创建粒子效果
  },
}
</script>

<style scoped>
.container {
  margin: 0 auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  perspective: 1000px; /* 添加3D视角效果 */
  position: relative; /* 确保相对定位 */
}

.blog {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 改为从顶部开始 */
  align-items: center;
  background-image: url('@/assets/bk.png');
  background-size: cover;
  background-position: center;
  padding: 40px;
  box-shadow: 0 0 30px rgba(0, 217, 255, 0.3); /* 霓虹光效阴影 */
  min-height: 100vh;
  position: relative;
}

/* 添加高科技背景网格效果 */
.blog::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(rgba(14, 30, 37, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 30, 37, 0.2) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: center center;
  pointer-events: none;
  z-index: 1;
}

/* 添加扫描线动画效果 */
.blog::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(to right, transparent, rgba(0, 217, 255, 0.5), transparent);
  animation: scanning 3s linear infinite;
  z-index: 2;
  pointer-events: none;
}

@keyframes scanning {
  0% { top: 0; }
  100% { top: 100%; }
}

/* 优化媒体查询 */
@media (max-width: 768px) {
  .blog {
    padding: 20px;
  }
  
  .blog-post {
    width: 80vw !important;
  }
}

.blog-post img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 0 15px rgba(0, 217, 255, 0.3); /* 添加霓虹光效 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-post img:hover {
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(0, 217, 255, 0.6);
}

.blog-post {
  position: relative;
  width: 35vw;
  color: rgb(33, 248, 223);
  border-bottom: 2px dashed rgba(66, 185, 131, 0.7);
  padding: 15px;
  margin-bottom: 20px;
  background: rgba(10, 25, 47, 0.6); /* 半透明深色背景 */
  backdrop-filter: blur(5px); /* 玻璃效果 */
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 217, 255, 0.2);
  transition: all 0.3s ease;
  z-index: 3;
  transform: translateZ(0); /* 激活GPU加速 */
}

.blog-post:hover {
  transform: translateY(-5px) translateZ(5px);
  box-shadow: 0 10px 20px rgba(0, 217, 255, 0.3);
  border-bottom: 2px dashed rgba(0, 217, 255, 0.9);
}

nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 2rem;
  margin-top: 2rem; /* 增加顶部间距 */
  position: relative;
  z-index: 10;
}

nav .item {
  position: relative;
  margin: 0 5px;
  width: auto;
  min-width: 150px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 20px;
  letter-spacing: 3px;
  color: aqua;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

nav .item:hover {
  background-color: rgba(0, 255, 255, 0.2);
  box-shadow: 0 0 10px aqua, 0 0 30px aqua;
  color: white;
  text-shadow: 0 0 5px aqua, 0 0 10px aqua;
  transform: translateY(-2px);
}

nav .item span:nth-of-type(1) {
  position: absolute;
  left: -100%;
  width: 100%;
  height: 3px;
  background-image: linear-gradient(to left, aqua, transparent);
  animation: btnanmaiton 1s linear infinite;
}

@keyframes btnanmaiton {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}

nav .item span:nth-of-type(2) {
  position: absolute;
  top: -100%;
  right: 0;
  width: 3px;
  height: 100%;
  background-image: linear-gradient(to top, aqua, transparent);
  animation: two 1s linear infinite;
  animation-delay: 0.25s;
}

@keyframes two {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}

nav .item span:nth-of-type(3) {
  position: absolute;
  right: -100%;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-image: linear-gradient(to right, aqua, transparent);
  animation: three 1s linear infinite;
  animation-delay: 0.5s;
}

@keyframes three {
  0% {
    right: -100%;
  }
  50%,
  100% {
    right: 100%;
  }
}

nav .item span:nth-of-type(4) {
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 3px;
  height: 100%;
  background-image: linear-gradient(to bottom, aqua, transparent);
  animation: zuo 1s linear infinite;
  animation-delay: 0.75s;
}

@keyframes zuo {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}

h1 {
  margin: 0;
  color: #00fdff;
  text-shadow: 0 0 5px rgba(0, 253, 255, 0.7);
}

/* 添加一些动态粒子效果 */
@keyframes particle {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-100px) translateX(100px);
    opacity: 0;
  }
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background-color: rgba(0, 217, 255, 0.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

/* 添加渐变背景动画 */
@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>